<template>
	<view class="content">
		<!-- <view class="information"> -->
		<view class="imga" @click="toDetail">
			<view class="information_nn">纯牛奶</view>
			<view class="information_ns">巴氏杀菌</view>
			<image class="information_img" src="@/static/commodity.png"></image>
			<view class="title">
				<view class="title_sizes">葡萄味牛奶</view>
				<view style="font-size: 18rpx;"><text class="money">￥</text>
					<text<text class="five">5元</text class="pz">/瓶
				</view>
			</view>
		</view>
		<view class="imga" v-for="(item,index) in list" :key="index"  @click="toDetail(item.id)">
			<view v-if="item.tag_name!=null" class="information_nn">{{item.tag_name}}</view>
			<image class="information_img" :src="ip+item.img_url"></image>
			<view class="title">
				<view class="title_sizes">{{item.paroduct_name}}</view>
				<view><text class="money">￥</text><text class="five">{{item.sall_price}}元</text><text class="pz">/瓶</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ip:'',
				list:[]
			}
		},
		onLoad() {
			this.ip=this.$api.BASE_URL;
	/* 		this.getList(); */
		},
		methods: {
			getList() {
				this.$api.request({
					url: 'products',
					method: 'GET',
					data: {
						shop_id: uni.getStorageSync('USER_DATA')
					}
				}).then(res => {
					console.log('res', res);
					if (res.code == 200) {
						console.log(res.data);
						this.list=res.data
					}
				}).catch(err => {
					console.error(error);
				});
			},
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/index/detail?id='+id
				})
			}
		}
	}
</script>
<style>
	page {
		background: rgba(244, 245, 247, 1);
	}
</style>
<style scoped lang="scss">
	.content {
		padding: 20rpx 20rpx 0rpx 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.imga {

			.information_nn {
				width: 120rpx;
				height: 60rpx;
				border-radius: 10rpx 0rpx 10rpx 0rpx;
				background: rgba(243, 6, 13, 1);
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				font-weight: 500;
				line-height: 33rpx;
				color: #FFF;
				position: absolute;
			}

			.information_ns {
				width: 120rpx;
				height: 60rpx;
				border-radius: 0rpx 10rpx 10rpx 0rpx;
				background: rgba(243, 6, 13, 1);
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				font-weight: 500;
				line-height: 33rpx;
				color: #FFF;
				position: absolute;
				top: 68rpx;
			}

			.information_img {
				width: 345rpx;
				height: 345rpx;
			}

			.title {
				padding: 0rpx 20rpx;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #FFF;
				border-radius: 0rpx 0rpx 10rpx 10rpx;
				margin: -10rpx 0rpx 20rpx 0rpx;

				.title_sizes {
					font-size: 26rpx;
					font-weight: 500;
					line-height: 36rpx;
					color: rgba(0, 0, 0, 1);
				}

				.money {
					font-size: 18rpx;
					font-family: 400;
					color: red;
				}

				.five {
					font-size: 26rpx;
					font-weight: 500;
					color: #F3060D;
				}

				.pz {
					font-size: 18rpx;
					font-weight: 400;
					color: #383838;
				}
			}
		}
	}
</style>